import Image from "next/image"

function Container({urls}){
    return(
        <div className="carousel w-full h-60">
        {urls.map((url, index) => (
            <div key={index} id={`slide${index}`} className="carousel-item relative w-full">
            <img
              src={url}
              className="w-full h-60" />
            {urls.length > 0 && <div className="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 transform justify-between">
              <a href={`#slide${index - 1}`}  className="btn btn-circle">❮</a>
              <a href={`#slide${index + 1}`}  className="btn btn-circle">❯</a>
            </div>}
          </div>
        ))}
      </div>
    )
}

export default Container